<template>
  <div>
    <div class="side-mask" @click="toClose()" :class="{'side-mask-hide': !isShow}"></div>
    <div class="side-area-con" :class="{'side-hide': !isShow}">
      <div class="side-title">
        <i class="el-icon-close" @click="toClose()"></i>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      toClose() {
        this.$emit('toClose')
      }
    }
  }

</script>
<style lang='scss' scoped>
  .side-title {
    line-height: 30px;
    font-size: 20px;
    text-align: right;
    > i {
      cursor: pointer;
    }
  }
  .side-area-con {
    position: fixed;
    width: 400px;
    top: 0;
    right: 0;
    bottom: 0px;
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 20px #888;
    -moz-box-shadow: 0px 0px 20px #888;
    box-shadow: 0px 0px 20px #888;
    -webkit-transition-property: right;
    -moz-transition-property: right;
    -ms-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s;
    z-index: 3200;
    &.side-hide {
      right: -420px;
    }
  }
  .side-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3100;
    &.side-mask-hide {
      display: none;
    }
  }
</style>
